import React, { memo } from 'react';
import { Modal as AntModal } from 'antd';
import type { ModalProps as AntModalProps } from 'antd';
import classNames from 'classnames';
import { Button } from '../Button';
import type { IButtonProps } from '../Button';
import styles from './Modal.module.css';

/**
 * 模态框组件属性接口
 * @description 扩展 Ant Design Modal 组件的属性
 */
export interface IModalProps extends Omit<AntModalProps, 'footer'> {
  /** 模态框尺寸 */
  size?: 'small' | 'medium' | 'large' | 'fullscreen';
  /** 是否显示关闭按钮 */
  showCloseButton?: boolean;
  /** 确认按钮属性 */
  confirmButtonProps?: Omit<IButtonProps, 'variant'>;
  /** 取消按钮属性 */
  cancelButtonProps?: Omit<IButtonProps, 'variant'>;
  /** 确认按钮文本 */
  confirmText?: string;
  /** 取消按钮文本 */
  cancelText?: string;
  /** 是否显示确认按钮 */
  showConfirmButton?: boolean;
  /** 是否显示取消按钮 */
  showCancelButton?: boolean;
  /** 确认按钮点击事件 */
  onConfirm?: () => void | Promise<void>;
  /** 取消按钮点击事件 */
  onCancel?: () => void;
  /** 自定义底部内容 */
  footer?: React.ReactNode | null;
  /** 自定义类名 */
  className?: string;
  /** 子元素 */
  children?: React.ReactNode;
}

/**
 * 模态框组件
 * @description 基于 Ant Design Modal 的自定义模态框组件，提供统一的样式和行为
 */
const Modal = memo<IModalProps>(({
  size = 'medium',
  showCloseButton = true,
  confirmButtonProps,
  cancelButtonProps,
  confirmText = '确认',
  cancelText = '取消',
  showConfirmButton = true,
  showCancelButton = true,
  onConfirm,
  onCancel,
  footer,
  className,
  children,
  ...props
}) => {
  // 根据尺寸设置宽度
  const getWidth = (): string | number => {
    switch (size) {
      case 'small':
        return 400;
      case 'medium':
        return 600;
      case 'large':
        return 800;
      case 'fullscreen':
        return '100vw';
      default:
        return 600;
    }
  };

  // 处理确认按钮点击
  const handleConfirm = async () => {
    if (onConfirm) {
      try {
        await onConfirm();
      } catch (error) {
        console.error('Modal confirm error:', error);
      }
    }
  };

  // 处理取消按钮点击
  const handleCancel = () => {
    if (onCancel) {
      onCancel();
    }
  };

  // 渲染底部内容
  const renderFooter = () => {
    if (footer === null) {
      return null;
    }

    if (footer !== undefined) {
      return footer;
    }

    const buttons = [];

    if (showCancelButton) {
      buttons.push(
        <Button
          key="cancel"
          variant="secondary"
          onClick={handleCancel}
          {...cancelButtonProps}
        >
          {cancelText}
        </Button>
      );
    }

    if (showConfirmButton) {
      buttons.push(
        <Button
          key="confirm"
          variant="primary"
          onClick={handleConfirm}
          {...confirmButtonProps}
        >
          {confirmText}
        </Button>
      );
    }

    return buttons.length > 0 ? (
      <div className={styles.footer}>
        {buttons}
      </div>
    ) : null;
  };

  // 组合类名
  const modalClassName = classNames(
    styles.modal,
    {
      [styles.small]: size === 'small',
      [styles.medium]: size === 'medium',
      [styles.large]: size === 'large',
      [styles.fullscreen]: size === 'fullscreen',
    },
    className
  );

  return (
    <AntModal
      width={getWidth()}
      closable={showCloseButton}
      onCancel={handleCancel}
      footer={renderFooter()}
      className={modalClassName}
      {...props}
    >
      <div className={styles.content}>
        {children}
      </div>
    </AntModal>
  );
});

Modal.displayName = 'Modal';

export default Modal;